<template>
  <!-- 方案规划导航栏 -->
  <div style="height: 100%;margin-left: -14vh;position: absolute;">

      <div id="areaDiv1" style="position: absolute;left:25vh;top: 8vh;" class="areaBox"> 
        
        <div style="display: inline-flex;width: 100%;">
          <img class="imgClass" src="../../assets/images/dw.png" />
          <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电网</div>
        </div>
        <div style="margin-top: 0vh;width: 97%;text-align: left;">
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">购电上限：{{ form.electricityPurchaseLimit }} kW</div>
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">售电上限：{{ form.electricitySalesCeiling }} 元/kW</div>
        </div>
      </div>
 
 
 
            
      <div id="areaDiv2" style="position: absolute;left:25vh;top: 22vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gf.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">光伏</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.photovoltaicCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.photovoltaicUnitInvestCost }} 万元</div>
          </div>
      </div>
 
    
    
      <div id="areaDiv3" style="position: absolute;left:25vh;top: 36vh;" class="areaBox"> 
         
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/fj.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">风机</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.fanCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.fanUnitInvestCost }} 万元</div>
          </div>
      </div>
      
      
      <div id="areaDiv4" style="position: absolute;left:25vh;top: 50vh;" class="areaBox"> 
         
         <div style="display: inline-flex;width: 100%;">
           <img class="imgClass" src="../../assets/images/cd.png" />
           <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储电</div>
         </div>
        <div style="margin-top: 0vh;width: 97%;text-align: left;">
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.elecStorageCapUp }} kW</div>
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.elecStorageUnitInvestCost }} 万元</div>
        </div>
     </div>

      <div id="anchorPoin-1" style="width: 1vh;height: 1vh;left: 44vh;top: 14.1vh;;float: right;position: absolute;;"></div>
      <div id="anchorPoin1" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 14.1vh;;float: right;position: absolute;"></div>

      <div id="lineDiv1" style="position: absolute;left: 55vh;;top: 3vh;height: 92%;width: 0.5vh;background: #95ef8499;" ></div>

      <div id="anchorPoin-2" style="width: 1vh;height: 1vh;left: 44vh;top: 27.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin2" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 27.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-3" style="width: 1vh;height: 1vh;left: 44vh;top: 41.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin3" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 41.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-4" style="width: 1vh;height: 1vh;left: 44vh;top: 55.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin4" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 55.5vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin-22" style="width: 1vh;height: 1vh;left: 54.8vh;;top:4vh;;float: right;position: absolute;"></div>
      <div id="anchorPoin22" style="width: 1vh;height: 1vh;left: 153vh;top:4vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-23" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 36vh;float: right;position: absolute;"></div>
      <div id="anchorPoin23" style="width: 1vh;height: 1vh;left: 67vh;top: 36vh;float: right;position: absolute;"></div>


      <div id="anchorPoin-5" style="width: 1vh;height: 1vh;left: 54.8vh;top: 12vh;float: right;position: absolute;"></div>
      <div id="anchorPoin5" style="width: 1vh;height: 1vh;left: 67vh;top: 12vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin6" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 48.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-6" style="width: 1vh;height: 1vh;left: 67vh;top: 48.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin7" style="width: 1vh;height: 1vh;left: 54.8vh;;top: 61vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-7" style="width: 1vh;height: 1vh;left: 67vh;top: 61vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-8" style="width: 1vh;height: 1vh;left: 86vh;top: 12.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin8" style="width: 1vh;height: 1vh;left: 97vh;top: 12.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-9" style="width: 1vh;height: 1vh;left: 86vh;top: 24vh;float: right;position: absolute;"></div>
      <div id="anchorPoin9" style="width: 1vh;height: 1vh;left: 96.5vh;top: 24vh;float: right;position: absolute;"></div>

      <div id="anchorPoin24" style="width: 1vh;height: 1vh;left: 153vh;top: 24vh;float: right;position: absolute;"></div>

      <div id="anchorPoin-10" style="width: 1vh;height: 1vh;left: 86vh;top: 34vh;float: right;position: absolute;"></div>
      <div id="anchorPoin10" style="width: 1vh;height: 1vh;left: 97vh;top: 34vh;float: right;position: absolute;"></div>
      
      <div id="anchorPoin11" style="width: 1vh;height: 1vh;left: 86vh;top: 38.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin12" style="width: 1vh;height: 1vh;left: 97vh;top: 38.6vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-12" style="width: 1vh;height: 1vh;left: 111vh;top: 38.6vh;float: right;position: absolute;"></div>

      <div id="anchorPoin13" style="width: 1vh;height: 1vh;left: 86vh;top: 50.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-13" style="width: 1vh;height: 1vh;left: 96.5vh;top: 50.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin14" style="width: 1vh;height: 1vh;left: 96.5vh;top: 16vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-14" style="width: 1vh;height: 1vh;left: 111vh;top: 16vh;float: right;position: absolute;"></div>

      <div id="anchorPoin15" style="width: 1vh;height: 1vh;left: 96.7vh;top: 51vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-15" style="width: 1vh;height: 1vh;left: 111vh;top: 51vh;float: right;position: absolute;background: red;"></div>

      <div id="anchorPoin16" style="width: 1vh;height: 1vh;left: 142.5vh;top: 57vh;;float: right;position: absolute;"></div>
      <div id="anchorPoin-16" style="width: 1vh;height: 1vh;left: 153vh;top: 57vh;;float: right;position: absolute;"></div>


      <div id="anchorPoin17" style="width: 1vh;height: 1vh;left: 130vh;top: 51.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin18" style="width: 1vh;height: 1vh;left: 143vh;top:51.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin19" style="width: 1vh;height: 1vh;left: 96.7vh;top: 45.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin-19" style="width: 1vh;height: 1vh;left: 153vh;top: 45.5vh;float: right;position: absolute;"></div>

      <div id="anchorPoin20" style="width: 1vh;height: 1vh;left: 86vh;top: 60.5vh;float: right;position: absolute;"></div>
      <div id="anchorPoin21" style="width: 1vh;height: 1vh;left: 143vh;top: 60.5vh;float: right;position: absolute;"></div>


      <div id="areaDiv5" style="position: absolute;left: 67vh;top: 6vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/ldjc.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电解槽</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.electCellCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.electCellUnitInvestCost }} 万元</div>
          </div>
      </div>

      
      <div id="areaDiv6" style="position: absolute;left: 67vh;top: 19vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cqg.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储氢罐</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.hydrogenStorageCapUp }} kg</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.hydrogenStorageUnitInvestCost }} 万元</div>
          </div>
      </div>

      
      <div id="areaDiv7" style="position: absolute;left: 67vh;top: 32vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rldc.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">燃料电池</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.fuelCellCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.fuelCellUnitInvestCost }} 万元</div>
          </div>
      </div>

      
      
      <div id="areaDiv8" style="position: absolute;left: 67vh;top: 45vh;;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rbjz.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">热泵</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.heatPumpCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.heatPumpUnitInvestCost }} 万元</div>
          </div>
      </div>

      <div id="areaDiv9" style="position: absolute;left: 67vh;top: 58vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dzl.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">电制冷</div>
        </div>
        <div style="margin-top: 0vh;width: 97%;text-align: left;">
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.electricRefrigeraCapUp }} kW</div>
          <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.electricRefrigeraUnitInvestCost }} 万元</div>
        </div>
      </div>

      <div id="lineDiv2" style="position: absolute;left: 97vh;top: 9vh;height: 37%;width: 0.5vh;background: rgb(41 194 239 / 55%);" ></div>

      <div id="lineDiv3" style="position: absolute;left: 97vh;top: 37vh;height: 24%;width: 0.5vh;background: #FF0000;" ></div>

      <div id="areaDiv10" style="position: absolute;left: 111vh;top:12vh;width: 20vh;height: 9vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gyfcq.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">工业副产氢</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: center;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">购氢上限：{{ form.hydrogenPurchaseLimit }} kW</div>
          </div>
      </div>

      
      <div id="areaDiv11" style="position: absolute;left: 111vh;top: 33vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cr.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;color: #FFFFFF;font-family: cursive;">储热</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.heatStorageCapUp }} kWh</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.heatStorageUnitInvestCost }} 万元</div>
          </div>
      </div>

      
      <div id="areaDiv12" style="position: absolute;left: 111vh;top: 47vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/xsszlj.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">吸收式制冷</div>
          </div>
          <div style="margin-top: 0vh;width: 97%;text-align: left;">
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;;">容量：{{ form.absorptionRefrigeraCapUp }} kW</div>
            <div style="font-size: 16px; font-family: ui-monospace;color: rgb(179 205 255);margin-left: 0.5vh;">投资成本：{{ form.absorptionRefrigeraUnitInvestCost }} 万元</div>
          </div>
      </div>

      <div id="lineDiv4" style="position: absolute;left: 143vh;top: 50vh;height: 19%;width: 0.5vh;background: #7030A0;" ></div>
      
      <div id="areaDiv13" style="position: absolute;left: 153vh;top: 1vh;height: 7vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">电负荷</div>
          </div>
           
      </div>

      
      <div id="areaDiv14" style="position: absolute;left: 153vh;top: 21vh;height: 7vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/yq.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">氢负荷</div>
          </div>
           
      </div>

      
      <div id="areaDiv15" style="position: absolute;left: 153vh;top:42vh;height: 7vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/rfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">热负荷</div>
          </div>
          
      </div>

      
      <div id="areaDiv16" style="position: absolute;left: 153vh;top: 54vh;height: 7vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/lfh.png" />
            <div style="width: 68%;font-size: 1.2vw;margin-top: 1.5vh; margin-left: 1vh;margin-left: 0.5vh;color: #FFFFFF;font-family: cursive;">冷负荷</div>
          </div>
           
      </div>
 

  </div>
</template>

<script>


  export default {
    name: 'heConfigurationPlan',
    
    beforeRouteLeave (to, from, next) {
       
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
       
        if(connRem){ 
       
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.connectionMaps.put(key,"");
          // this.$nextTick(function(){
          //   this.$jsPlumbObj.deleteConnection(connRem);  
          // });
        }

      }
      
      var connDivs = $(".jtk-connector");
      var endpointDivs = $(".jtk-endpoint");

      if(connDivs){
        for(var i = 0;i<connDivs.length;i++){
          var dom = connDivs[i];
          $(dom).remove();
        }
      }

      if(endpointDivs){
        for(var i = 0;i<endpointDivs.length;i++){
          var dom = endpointDivs[i];
          $(dom).remove();
        }
      }

      next();
    },
    data() {
      return {
  
        form: {
          id:"",
          schemeName:"",
          checkScheme:"",
          isHavaDw: '1',
          isHavaGf: '1',
          isHavaFj: '1',
          isHavaCd : "1",
          isHavaCqg: '1',
          isHavaRldc: "1",
          isHavaCr : "1",
          configureTarget:"1", 
          electricityPurchaseLimit : "",
          electricitySalesCeiling : "",
          photovoltaicCapUp : "",
          photovoltaicUnitInvestCost : "", 
          fanCapUp : "",
          fanUnitInvestCost : "",
          electCellCapUp : "",
          electCellUnitInvestCost : "",
          elecStorageCapUp : "",
          elecStorageUnitInvestCost : "",
          hydrogenStorageCapUp : "", 
          hydrogenStorageUnitInvestCost : "",
          fuelCellCapUp : "",
          fuelCellUnitInvestCost : "",
          heatPumpCapUp : "", 
          heatPumpUnitInvestCost : "",
          electricRefrigeraCapUp : "",
          electricRefrigeraUnitInvestCost : "",
          heatStorageCapUp : "",
          heatStorageUnitInvestCost : "",
          absorptionRefrigeraCapUp : "",
          absorptionRefrigeraUnitInvestCost : "",
          hydrogenPurchaseLimit : "", 
        },
        $jsPlumbObj : {},
        connectionMaps : {}, 
        connectionArr : []
      }
    },
    created() {
     
       
    },
    mounted: function() {
      this.connectionMaps = this.getMap();
      this.generateWorkFlow();

      this.queryPageData();
    },
    methods: {  

      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryConfigurationPlan?schemeId='+"&tableName=he_scheme_selection").then((res) => {
          var result = res.data.data;

          if(result){
            vm.form = result;
            
            var color1 = "#6ba785";
            var color2 = "#4AA0D6"; 
            var color3 = "#FF0000";  

            var anchor = ['Right', 'Left'];

            if(vm.form.isHavaGf=="1"){
              $("#areaDiv2").show(100);
              vm.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color1,"");

            }else{
            
              var key = "anchorPoin-2_anchorPoin2";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");

              }

              $("#areaDiv2").hide(100); 
            }

            
            if(vm.form.isHavaFj=="1"){
              $("#areaDiv3").show(100); 

              setTimeout(function(){
                vm.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,""); 
              },101);

            }else{
              $("#areaDiv3").hide(100);
                          
              var key = "anchorPoin-3_anchorPoin3";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaDw=="1"){
              $("#areaDiv1").show(100); 
              setTimeout(function(){
                vm.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin1","anchorPoin-1",anchor,"Straight",color1,"");
              },101);
            }else{
              $("#areaDiv1").hide(100);
              
              var key = "anchorPoin-1_anchorPoin1";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
              var key = "anchorPoin1_anchorPoin-1";

              var connRem = vm.connectionMaps.get(key);

              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            }

            
            if(vm.form.isHavaCqg=="1"){
              $("#areaDiv6").show(100); 

              setTimeout(function(){
                vm.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color2,"");
                vm.connectDiv("anchorPoin9","anchorPoin-9",anchor,"Straight",color2,"");
              },101);
            
            }else{
              $("#areaDiv6").hide(100);
                
              var key = "anchorPoin-9_anchorPoin9";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
            
              var key = "anchorPoin9_anchorPoin-9";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);
                vm.connectionMaps.put(key,"");
              }

            }



            
              
            if(vm.form.isHavaCd=="1"){
              $("#areaDiv4").show(100); 

              setTimeout(function(){
                vm.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin4","anchorPoin-4",anchor,"Straight",color1,"");
              },101);
              

            }else{
              $("#areaDiv4").hide(100);

              var key = "anchorPoin-4_anchorPoin4";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }
          
              var key = "anchorPoin4_anchorPoin-4";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }

            }

            
            if(vm.form.isHavaCr=="1"){
              $("#areaDiv11").show(100); 


              setTimeout(function(){
                vm.connectDiv("anchorPoin12","anchorPoin-12",anchor,"Straight",color3,"");
                vm.connectDiv("anchorPoin-12","anchorPoin12",anchor,"Straight",color3,"");
              },101);

            }else{
              $("#areaDiv11").hide(100);

              var key = "anchorPoin12_anchorPoin-12";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);
                vm.connectionMaps.put(key,"");  
              }
          
              var key = "anchorPoin-12_anchorPoin12";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
            
              }

            }

            
            if(vm.form.isHavaRldc=="1"){
              $("#areaDiv7").show(100); 
            
              setTimeout(function(){
                vm.connectDiv("anchorPoin23","anchorPoin-23",anchor,"Straight",color1,"");
                vm.connectDiv("anchorPoin10","anchorPoin-10",anchor,"Straight",color2,"");
                vm.connectDiv("anchorPoin11","anchorPoin12",anchor,"Straight",color3,"");

              },101);
              
            }else{
              $("#areaDiv7").hide(100);

                
              var key = "anchorPoin23_anchorPoin-23";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
            
              }
                
              var key = "anchorPoin10_anchorPoin-10";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
          
              }
                
              var key = "anchorPoin11_anchorPoin12";

              var connRem = vm.connectionMaps.get(key);
          
              if(connRem){ 
                vm.$jsPlumbObj.deleteConnection(connRem);  
                vm.connectionMaps.put(key,"");
              }


            }

            
          }


        }).catch((error) => {
          console.log(error);
        });

         
          


      },
 
   
      
      getMap : function() {
        
        //初始化map_,给map_对象增加方法，使map_像Map
        var map_ = new Object();
        map_.put = function(key, value) {
            map_[key+'_'] = value;
        };
        map_.get = function(key) {
            return map_[key+'_'];
        };
        map_.remove = function(key) {
            delete map_[key+'_'];
        };
        map_.keyset = function() {
            var ret = "";
            for(var p in map_) {
                if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                    ret += ",";
                    ret += p.substring(0,p.length-1);
                }
            }
            if(ret == "") {
                return ret.split(",");
            } else {
                return ret.substring(1).split(",");
            }
        };
        return map_;
      },

      generateWorkFlow : function(){
 
         var color1 = "#6ba785";
         var color2 = "#4AA0D6"; 
         var color3 = "#FF0000"; 
         var color4 = "#460565"; 



          var anchor = ['Right', 'Left'];

          this.connectDiv("anchorPoin-1","anchorPoin1",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin1","anchorPoin-1",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-2","anchorPoin2",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin-3","anchorPoin3",anchor,"Straight",color1,"");

          
          this.connectDiv("anchorPoin-4","anchorPoin4",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin4","anchorPoin-4",anchor,"Straight",color1,"");

          //
          this.connectDiv("anchorPoin-22","anchorPoin22",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-5","anchorPoin5",anchor,"Straight",color1,"");

          //
          this.connectDiv("anchorPoin23","anchorPoin-23",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin6","anchorPoin-6",anchor,"Straight",color1,"");
          this.connectDiv("anchorPoin7","anchorPoin-7",anchor,"Straight",color1,"");

          this.connectDiv("anchorPoin-8","anchorPoin8",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin-9","anchorPoin9",anchor,"Straight",color2,"");
          this.connectDiv("anchorPoin9","anchorPoin-9",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin10","anchorPoin-10",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin11","anchorPoin12",anchor,"Straight",color3,"");

          
          this.connectDiv("anchorPoin13","anchorPoin-13",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin-14","anchorPoin14",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin9","anchorPoin24",anchor,"Straight",color2,"");

          this.connectDiv("anchorPoin12","anchorPoin-12",anchor,"Straight",color3,"");
          this.connectDiv("anchorPoin-12","anchorPoin12",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin15","anchorPoin-15",anchor,"Straight",color3,"");

          //this.connectDiv("areaDiv9","anchorPoin16",anchor,"Straight",color4,"");

          this.connectDiv("anchorPoin17","anchorPoin18",anchor,"Straight",color4,"");

          this.connectDiv("anchorPoin16","anchorPoin-16",anchor,"Straight",color4,"");


          this.connectDiv("anchorPoin19","anchorPoin-19",anchor,"Straight",color3,"");

          this.connectDiv("anchorPoin20","anchorPoin21",anchor,"Straight",color4,"");

      },
    

 
    
      connectDiv : function(source,target,anchor,connector,stroke,label){
 

          var jsPlumbObj = this.getJsPlumb(stroke,connector);
  
          if(label){

              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", { width: 5, length: 5,  location: 1 }], 
                      label
                  ] 
              });

              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
            }else{
                          
              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor, 
                  overlays : [
                      ["Arrow", { width: 1, length: 1,  location: 1 }], 
                  ] 
              });

              
              var connRem = this.connectionMaps.get(source+"_"+target);
        
              if(connRem){ 
                this.$jsPlumbObj.deleteConnection(connRem);  
                this.connectionMaps.put(source+"_"+target,"");
              }

              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
          }

          window.addEventListener('resize', () => {
              jsPlumbObj.repaintEverything()
          })

          return jsPlumbObj;

      },
 

      
      getJsPlumb(lineColor,connector){
          
          var connectorValue = "Flowchart";

          if(connector!=null&&connector!=""){
              connectorValue = connector;
          }

          this.$jsPlumbObj = this.$jsPlumb;

          var jsPlumb = this.$jsPlumb.getInstance({

              ConnectionsDetachable   : false,//连接是否可以使用鼠标默认分离

              //  Endpoint:['Image', {
              //    src: 'static/images/def_endpoint.png',
              //  }] , // 端点的形状
              Anchor: "Continuous", 
              Endpoint : "Blank",//端点（锚点）的样式声明（Dot）
              EndpointStyle: { radius: 1, fill: "#FFFFFF" }, //端点默认样式
              PaintStyle: { stroke: lineColor, strokeWidth: 2  }, // 连线样式
              HoverPaintStyle: { stroke: lineColor }, // 默认悬停样式
              // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
              EndpointHoverStyle: { fill: lineColor }, // 端点悬停样式
              ConnectionOverlays: [
              [
                  "Arrow",
                  {
                      // 箭头
                      width:12,
                      length:12,
                      location: 1,
                      visible: true, 
                      // paintStyle: {
                      //     stroke: lineColor,
                      //     fill: lineColor
                      // }
                  }
                  
              ]
              ],
              Connector: [connectorValue, { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
              DrapOptions: { cursor: "crosshair", zIndex: 2000 },
              Scope: "jsPlumb_DefaultScope"
          });

          return jsPlumb;

      },
 

    }
  }
</script>

 

<style scoped>

.configBox{
  display: block;
  width: 27vh;
  height: 67vh;
  border-radius: 2vh;
  background-image: linear-gradient(to bottom, #2946ad, #61dde37a);
}

@import '../planProgram/style/tree.css';
  img{
    width: 70px;
  }
  td{
    position: relative;
  }
  .box1{
    position: relative;
    width: 100%;
    min-height: 90vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  /deep/ .el-dialog {
    background:rgba(40,54,121, 0.9);
    -webkit-box-sizing: border-box;
    border: none;

  }
  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background:#374590;
  }
  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/ .el-input.is-disabled .el-input__inner{
    background-color: #161E43;
    border-color: #161E43;
    color: #FFFFFF;
    text-align: left;
    cursor: not-allowed;
  } 



  /deep/ .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #f2f2f2;
      display: inline-block;
      font-size: inherit;
      height: 31px;
      line-height: 31px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }

.imgClass{
  vertical-align: middle;
  margin-top: 1vh;
  margin-left: 1vh;
  width: 4vh;
  height: 4vh;
}
 


.areaBox{
  display: block;
    width: 20vh;
    height: 11.5vh;
    text-align: left;
    border-radius: 12px;
    border: 1px solid #504ed557;
    background-image: -webkit-gradient(linear, left top, right top, from(#425bb5), to(#8ecd7e7a));
    background-image: linear-gradient(to right, #4274b5, #0f5d753d);
    cursor: pointer;
}

</style>
